<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DEHEMS</title>
<link rel="stylesheet" type="text/css" 
href="styles.css">


<script type="text/javascript" src="jquery-latest.js"></script>
 
<script type="text/javascript"> 
$(document).ready(function(){

//Page Flip on hover

	$("#pageflip").hover(function() {
		$("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		$("#pageflip img").stop() 
			.animate({
				width: '52px', 
				height: '52px'
			}, 500);
		$(".msg_block").stop() 
			.animate({
				width: '52px', 
				height: '52px'
			}, 200);
	});

	
});
</script> 
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
	position: relative;
	right: 0; top: 0;
	float: right; 
}
#pageflip img {
	width: 52px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 52px; height: 52px;
	overflow: hidden;
	position: absolute;
	right: 0; top: 0;
	background: url(12.png) no-repeat right top;
}
.style1 {
	color: #0080FF;
	font-weight: bold;
}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<div class="folio_block">
    	
        <div class="main_view">
            <div class="window">	
                <div style=" left: 0px;" 
class="image_reel">
                    <a href="#"><img
 src="reel_1.jpg" 
alt=""></a>
                    <a href="#"><img
 src="reel_2.jpg" 
alt=""></a>
                    <a href="#"><img
 src="reel_3.jpg" 
alt=""></a>
                    <a href="#"><img
 src="reel_4.jpg" 
alt=""></a>
                </div>
            </div>
            <div style="display: block;" class="paging">
                <a class="active" href="#" rel="1">1</a>
                <a class="" href="#" rel="2">2</a>
                <a class="" href="#" rel="3">3</a>
                <a class="" href="#" rel="4">4</a>
            </div>
        </div>
        <p style="color: rgb(255, 255, 255); margin: 10px 0pt; float: 
left; width: 100%;"><a 
href="#"
 style="color: rgb(255, 255, 255); padding: 10px 0pt;">
    </div>	

</div>



<body id="home">
	<div id="pageflip">
		<a href="http://www.dehems.eu"><img style="width: 
52px; display: block; height: 52px;" src="page_flip.png" alt="12.png"></a>
		<div style="width: 52px; display: block; height: 52px;" 
class="msg_block"></div>
	</div>
    
	
    

<div class="banner">
		<div></div>
</div>
<div class="topnav">
		<ul>
			<li class="btn_1"><a href="">Acasa</a></li>
		    <li class="btn_2"><a href="">Proiecte</a></li>
			<li class="btn_3"><a href="">Cercertari</a></li>
		    <li class="btn_4"><a href="">Parteneri</a></li>
			<li class="btn_5"></li>
		  <li class="btn_6"><a href="">Contact</a></li>
		</ul>
</div>	




<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 6000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>
<div id="rest"> TEST TEXT 
  
  <p>The DEHEMS installations are now well under way. &nbsp;In the past two weeks   over&nbsp;installations&nbsp;have been fast paced, with volunteers coming in   daily.In Manchester, Greenlight Computers working round the clock to   meet the deadline. The kit involves a clamp on to the live cable at the   householders meter transmitting data to the data controller box which is   connected to the users broadband router. &nbsp;The householder can then then   view their&nbsp;electricity&nbsp;usage&nbsp;online. The next phase is to install the   individual plug meters (IAM&rsquo;s) from Plugwise in a selected number of   homes.<br>
  </p>
</div>
    </body></html>
